<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="keywords" content="weepmoon,杜禹天,个人主页,个人博客,java,javascript,linux,centos">
    <meta name="description" content="你好,程序员的小哥哥了解一下"/>
    <meta name="author" content=""/>

    <title>WeepMoon</title>

    <link rel="icon" type="image/png" th:href="@{/hiwodyt/img/icon.png}">
    <!-- Bootstrap core CSS -->
    <link th:href="@{/hiwodyt/bootstrap/css/bootstrap.min.css}" rel="stylesheet"></link>
    <!-- Custom styles for this template -->
    <link th:href="@{/hiwodyt/css/modern-business.css}" rel="stylesheet"></link>
    <link th:href="@{/hiwodyt/css/sortable.min.css}" rel="stylesheet"></link>
    <!--分类标签-->
    <link rel="stylesheet" th:href="@{/hiwodyt/css/type.css}"></link>
    <!--首页全局css-->
    <link rel="stylesheet" th:href="@{/hiwodyt/css/app.css}"></link>
    <link rel="stylesheet" th:href="@{/hiwodyt/css/foot.css}"></link>
    <!--炫酷样式-->
    <link rel="stylesheet" th:href="@{/hiwodyt/swing/normalize.css}"></link>
    <link rel="stylesheet" th:href="@{/hiwodyt/swing/swing.css}"></link>


    <style type="text/css">
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>

<body>

<!-- Navigation -->
<nav class="navbar fixed-top navbar-dark bg-dark fixed-top" th:fragment="nav">
    <div class="container">
        <a class="navbar-brand" th:href="@{/}"><h2 class="word word--swing">weepmoon</h2></a>

        <!-- <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                 data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                 aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>-->
        <!--<div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="about.html">关于我</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="services.html">服务</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact.html">联系我</a>
                </li>

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false">
                        博客
                    </a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
                        <a class="dropdown-item" href="blog-home-1.html">泊客之家1</a>
                        <a class="dropdown-item" href="blog-home-2.html">博客支架2</a>
                        <a class="dropdown-item" href="blog-post.html">博客之家3</a>
                    </div>
                </li>
            </ul>
        </div>-->
    </div>

</nav>

<header>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
            <!-- Slide One - Set the background image for this slide in the line below -->
            <div class="carousel-item active">
                <img src="http://hiwodyt.oss-cn-shanghai.aliyuncs.com/banner/banner.png" class="img-responsive"
                     alt="Responsive image"/>
                <!--<div class="carousel-caption d-none d-md-block">
                  <h3>First Slide</h3>
                  <p>This is a description for the first slide.</p>
                </div>-->
            </div>
            <!-- Slide Two - Set the background image for this slide in the line below -->
            <!-- <div class="carousel-item" style="background-image: url('http://placehold.it/1900x1080')">
               <div class="carousel-caption d-none d-md-block">
                 <h3>Second Slide</h3>
                 <p>This is a description for the second slide.</p>
               </div>
             </div>-->
            <!-- Slide Three - Set the background image for this slide in the line below -->
            <!-- <div class="carousel-item" style="background-image: url('http://placehold.it/1900x1080')">
               <div class="carousel-caption d-none d-md-block">
                 <h3>Third Slide</h3>
                 <p>This is a description for the third slide.</p>
               </div>
             </div>-->
        </div>
        <!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
           <span class="carousel-control-prev-icon" aria-hidden="true"></span>
           <span class="sr-only">Previous</span>
         </a>
         <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
           <span class="carousel-control-next-icon" aria-hidden="true"></span>
           <span class="sr-only">Next</span>
         </a>-->
    </div>
</header>
<!-- Page Content -->
<div class="container">
    <!-- 后续添加列表 -->
    <!-- <div class="row">
       <div class="col-lg-4 mb-4">
         <div class="card h-100">
           <h4 class="card-header">最新文章</h4>
           <div class="card-body">
             <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
           </div>
           <div class="card-footer">
             <a href="#" class="btn btn-primary">Learn More</a>
           </div>
         </div>
       </div>
       <div class="col-lg-4 mb-4">
         <div class="card h-100">
           <h4 class="card-header">作者推荐文章</h4>
           <div class="card-body">
             <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis ipsam eos, nam perspiciatis natus commodi similique totam consectetur praesentium molestiae atque exercitationem ut consequuntur, sed eveniet, magni nostrum sint fuga.</p>
           </div>
           <div class="card-footer">
             <a href="#" class="btn btn-primary">Learn More</a>
           </div>
         </div>
       </div>
       <div class="col-lg-4 mb-4">
         <div class="card h-100">
           <h4 class="card-header">点赞文章</h4>
           <div class="card-body">
             <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
           </div>
           <div class="card-footer">
             <a href="#" class="btn btn-primary">Learn More</a>
           </div>
         </div>
       </div>
     </div>-->
    <!-- /.row -->

    <!-- Portfolio Section -->
    <!--分类-->
    <div class="row">

        <ul class="hList">
            <li th:each="cat:${cats}">
                <a class="menu" th:attr="data-sjslink=${cat.summary}">
                    <h2 class="menu-title" th:text="${cat.title}"></h2>
                </a>
            </li>
        </ul>
        <!-- <li>
         <a href="#click" class="menu">
           <h2 class="menu-title">animals</h2>
         </a>
       </li>

         <li>
           <a href="#click" class="menu">
             <h2 class="menu-title menu-title_2nd">names</h2>
           </a>
         </li>
         <li>
           <a href="#click" class="menu">
             <h2 class="menu-title menu-title_3rd">things</h2>
           </a>
         </li>
         <li>
           <a href="#click" class="menu">
             <h2 class="menu-title menu-title_4th">Movies</h2>
           </a>
         </li>-->

    </div>


    <!--文章列表-->
    <div class="row sjs-default " id="sortable">
        <div th:each="article:${articles}" th:class="'col-lg-4 col-sm-6 portfolio-item item '+${article.categoryName}"
             th:attr="data-sjsel=${article.categoryName}">
            <div class="card h-100 itemDiv">
                <!--二级分类标签
                <div class="catName">
                    <small class="circle"><span>心情</span></small>
                </div>-->
                <a th:href="'/hiwodyt/article/'+${article.id}">
                    <img th:src="${article.thumbnail}" class="img-responsive">
                </a>
                <div class="card-body">
                    <div class="clearfix">
                        <h4 class="date ">
                            <a href="javascript:void(0)" class="summary"
                               th:text="${#dates.format(article.created,'yyyy-MM-dd')}"></a>
                        </h4>
                        <div style="float: right">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xihuan"></use>
                            </svg>
                            <span th:text="${article.voteUp}"></span>
                        </div>
                    </div>

                    <h4 class="card-title">
                        <a href="#" th:text="${article.title}" th:href="'/hiwodyt/article/'+${article.id}"></a>
                    </h4>

                    <p class="summary" th:text="${article.summary}"></p>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- Footer -->
<footer class="pt-5 bg-dark mt-5 footer" th:fragment="footer">
    <div class="container">
        <!-- <p class="m-0 text-center text-white">Copyright &copy; Your Website 2018</p>-->
        <div class="row">
            <div class="col-lg-5 text-white">
                <p class="about mb-5">关 于 我</p>

                <p>对于从来不看笔记的站长,站长决定写一个网站专门来记录站长(我)的成长经历、学习经历,以及开发路上遇见的一些坑。</p>
                <p class="foot-icon"><a>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qq"></use>
                    </svg>
                </a><a>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wechat"></use>
                    </svg>
                </a><a>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weibo"></use>
                    </svg>
                </a></p>
            </div>
            <div class="col-lg-3 col-md-6 offset-lg-1">
                <p class="about mb-5">坚 持</p>
                <div id="myclock" class="pl-3"></div>
                <p class="mt-3">某音三分钟,人间两小时。</p>
            </div>

            <div class="col-lg-3 col-md-6 ">
                <p class="about mb-5">你 最 帅 的 站 长</p>
                <a th:href="@{/hiwodyt/about}" target="_blank" class="mybtn"> GET MORE!</a>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-12 footer-copyright">
                <p class="text-website">
                    Copyright © 2018 <a href="http://www.weepmoon.cn" title="weepmoon">WeepMoon</a>.<a
                        href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">赣ICP备18013384号</a> Designed
                    by dyt .
                </p>
            </div>
        </div>
    </div>
    <!-- /.container -->
</footer>


<!-- Bootstrap core JavaScript -->
<script th:src="@{/hiwodyt/jquery/jquery.min.js}"></script>
<script th:src="@{/hiwodyt/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!--引入瀑布流插件-->
<script type="text/javascript" th:src="@{/hiwodyt/js/masonry.pkgd.min.js}"></script>
<script type="text/javascript" th:src="@{/hiwodyt/js/imagesloaded.pkgd.min.js}"></script>
<script type="text/javascript" th:src="@{/hiwodyt/js/sortable.min.js}"></script>
<!--图标-->
<script type="text/javascript" th:src="@{/hiwodyt/js/iconfont.js}"></script>
<!--引入全局JS-->
<script type="text/javascript" th:src="@{/hiwodyt/app.js}"></script>
<!--引入分类标签-->
<!--时钟js-->
<script th:src="@{/hiwodyt/jquery/jquery.thooClock.js}"></script>
<!--炫酷样式-->
<script th:src="@{/hiwodyt/swing/anime.min.js}"></script>
<script th:src="@{/hiwodyt/swing/charming.min.js}"></script>
<script th:src="@{/hiwodyt/swing/swing.js}"></script>
</body>
<script>
    document.querySelector('#sortable').sortablejs();
</script>

</html>
